<template>
  <div class="seer_header_box">
    <div class="content flex seer_header">
      <div class="logo_flex">
        <a href="/#/"><img class="logo" src="../assets/img/logo.png" /></a>
      </div>

      <nav class="flex">
        <p v-for="item in menu" :key="item.name">
          <span>{{ item.name }} <img src="../assets/img/below.png" alt="" ></span>
        </p>
        <div class="sublevel">
          <p v-for="item in menu" :key="item.name">
            <ul class="sublevelul">
              <li class="ups">{{ item.name }}</li>
              <li v-for="subitem in item.children" :key="subitem.name">
                <a v-if="subitem.hash" :href="subitem.hash" :target="subitem.link ? '_blank' : ''">{{ subitem.name }}</a>
                <a v-else @click="comingSoon">{{ subitem.name }}</a>
              </li>
            </ul>
          </p>
        </div>
      </nav>

      <div class="header_btn web">
        <p class="btn" @click="comingSoon">BeeLink</p>
        <p class="btn" style="margin-left: 30px;" @click="comingSoon">Decentralized Exchange</p>
      </div>
      <div class="mune phone" @click="isMobile = !isMobile">
        <img v-if="!isMobile" src="../assets/img/muen.png" alt="">
        <img v-if="isMobile" src="../assets/img/close.png" alt="">
      </div>
    </div>
    <div class="eth_header_mobile" v-if="isMobile">
      <el-drawer size="100%" direction="ltr" v-model="isMobile" :with-header="false">
        <div class="nav_mb">
          <div class="header_btn">
            <p class="btn" style="margin-bottom: 10px;" @click="comingSoon">BeeLink</p>
            <p class="btn"  @click="comingSoon">Decentralized Exchange</p>
          </div>
          <ul>
            <li v-for="(item, i) in menu" :key="i">
              <div>
                <i class="yuan"></i>
                {{ item.name }}
              </div>
              <p v-for="el in item.children" :key="el.name">
                <a v-if="el.hash" :href="el.hash" :target="el.link ? '_blank' : ''">{{ el.name }}</a>
                <a v-else @click="comingSoon">{{ el.name }}</a>
              </p>
            </li>
          </ul>
          
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script setup>
import { ElMessage, ElDrawer } from 'element-plus'
import { ref } from 'vue'
const isMobile = ref(false)
const menu = [
  {
    name: 'Network',
    children: [
      { name: 'Heterogeneous Multi Chain', hash: false },
      { name: 'Relay Chain', hash: false },
      { name: 'ParaChain', hash: false },
      { name: 'Become a Validator', hash: false },
    ],
  },
  {
    name: 'Ecosystem',
    children: [
      { name: 'DEMX Protocol', hash: false },
      { name: 'Exchange', hash: false },
      { name: 'Stablecoins', hash: false },
      { name: 'DeFi', hash: false },
      { name: 'SocialFi', hash: false },
      { name: 'NFT', hash: false }
    ],
  },
  {
    name: 'Community',
    children: [
      { name: 'Apache Beehive Project', hash: false },
      { name: 'Events & Actions', hash: false },
      { name: 'Join the Collective', hash: false },
      { name: 'DAO Govermance', hash: false }, 
    ],
  },
  {
    name: 'BeeDEX Labs',
    children: [
      { name: 'Developers Project', hash: false },
      { name: 'Documentation', hash: false },
      { name: 'Build a BeeDEX Project', hash: false },
      { name: 'Bounty Program', hash: false }
    ],
  },
]

const comingSoon = () => {
  ElMessage.warning('Coming Soon')
}
</script>

<style scoped lang="less">
.logo_flex {
  display: flex;
  align-items: center;

  .bth {
    margin-left: 10px !important;
  }
}

.seer_header_box {
  background: #000;
  height: 94px;
  min-width: 768px;
}

.seer_header .mune {
  img {
    width: 24px;
  }
}

.seer_header {
  height: 100%;

  .logo {
    height: 40px;
  }
  nav{
    position: relative;
  }
  nav p {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: .5s;
    margin-right: 40px;
    line-height: 40px;
    &:hover{color: #FFD900;}

    span {
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 15px;
      img{width: 14px;margin-left: 4px;}
    }
    // &:nth-last-child(1) {
    //   margin-right: 0;
    // }
  }
  .sublevel {
      position: absolute;
      display: flex;
      align-items: flex-start;
      top: 40px;
      left: 0;
      background: #fff;
      border-radius: 12px;
      padding: 0 25px;
      box-shadow: 0 0 3px #eee;
      z-index: 10;
      height: 0;
      opacity: 0;
      overflow: hidden;
      transition: .3s;

      li {
        white-space: nowrap;
        line-height: 30px;
        margin: 5px 0;

        a {
          display: block;
          font-size: 14px;
          transition: .2s;
          color: #000;
          &:hover{color: #FFD900;}
        }
      }
      .ups{color: #000;font-weight: bold;}
    }
    nav:hover {
      .sublevel {
        height: auto;
        padding: 20px 25px;
        opacity: 1;
      }
    }

  .bth {
    display: flex;
    color: #fff;
    align-items: center;
  }
}

.eth_header_mobile ul{padding-bottom: 100px;}
.eth_header_mobile ul li {
  border-bottom: 1px solid rgb(41, 41, 41);
  line-height: 40px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  font-size: 16px;

  .el-icon {
    margin-right: 5px;
  }

  .yuan {
    margin: 0 5px 2px 0 !important;
    width: 6px;
    height: 6px;
  }

  p {
    font-size: 14px;
    padding-left: 16px;
  }

  a {
    width: 100%;
    // color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
  }

  .div {
    display: flex;
    align-items: center;

    a {
      padding-left: 10px;
    }
  }
}

:deep(.el-overlay){
  border-top: 1px solid rgb(41, 41, 41);
  background-color: #000;
  top: 70px;
}

:deep(.el-drawer__body){
  background:linear-gradient(135deg,rgb(0, 0, 0)  60%,#837d11  100%)
}
@media (max-width:768px) {
  // home首页
  #app {
    .content{
        width: 94%;
        max-width: none;
        padding-left:3% !important;
        padding-right:3% !important;
    }
    .phone {
      display: block;
    }
    .web {
      display: none;
    }

    .seer_header_box {
      min-width: auto;
      max-width: 768px;
      width: 100vw;
      height: 70px;
      box-shadow: 0 0 4px rgb(83, 83, 83);

      nav {
        display: none;
      }
    }

    .logo {
      height: 1.6rem !important;
    }

    .header_btn{
      margin-bottom: 10px;
      .btn{
        height: 30px;
        line-height: 30px;
        font-size: 13px;
        padding: 0 14px;
        margin-right: 5px;
        border-radius: 0;
        font-weight: normal;
        color: #FFD900;
        background-color: #000;
        border:1px solid #ffd900;
      }
    }
     
  }
}
</style>